<template>
	<view class="page-coach-course">
		<MxMemberCourseCard v-for="course in courseList" :course="course" @select="onSelect" :coach="true" />
		<EmptyData v-if="!hasCourse" />
	</view>
</template>

<script>
	import MxMemberCourseCard from '@/components/mine/member-course/MxMemberCourseCard.vue';
	import EmptyData from '@/components/common/EmptyData.vue'
	import * as courseApi from '@/api/course.js'
	
	export default {
		components: {
			MxMemberCourseCard,
			EmptyData
		},
		data() {
			return {
				courseList: []
			};
		},
		computed: {
			hasCourse() {
				return this.courseList.length !== 0
			}
		},
		onShow() {
			courseApi.coachCourse().then(res => {
				console.log(res)
				this.courseList = res.data
			})
		},
		methods: {
			onSelect(courseId) {
				uni.navigateTo({
					url: `/pages/mine/coach-course-detail?courseId=${courseId}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
@import '@/common/scss/mixins.scss';
@import '@/common/scss/var.scss';
page{
	background-color: $page-bg-color;
}
.page-coach-course{
	box-sizing: border-box;
	width: 100%;
	padding: 0 24rpx;
	padding-top: 64rpx;
}
</style>
